<%@ include file="/WEB-INF/jsp/common/include.jsp" %>
<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="app" uri="AppTags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" type="text/css" href="<app:slaveServerUrl />/css/layout.css">
<link rel="stylesheet" type="text/css" href="<app:slaveServerUrl />/css/common.css">
<link rel="stylesheet" type="text/css" href="<app:slaveServerUrl />/css/add.css">
<script>
  function deleteImage(type){
    var form = document.forms[0];
    form.enctype = '';
    form.action = '/ad/${param.editor}/image/delete.do';
    form.submit();
  }
  function selectImage(){
    var messageEl = document.getElementById('${param.type}UploadMessage');
    try{
      messageEl.innerHTML = "<img src='<app:slaveServerUrl />/image/processing.gif' style='border : 0'/>";
      setTimeout(function(){document.forms[0].submit()},500);
    }
    catch(e){
      alert('Ваш браузер не поддерживает загрузку фотографий.\n Чтобы загрузить фотографии воспользуйтесь Firefox, Opera или Chrome');
      messageEl.innerHTML = '';
    }
  }
</script>
<div class="label">
  <label for="${param.type}">
    <spring:message code="label.imageType.${param.type}" />
  </label>
</div>
<div class="imageEditor">
  <form method="POST" enctype="multipart/form-data" class="imageUploadForm" name="imageUploadForm"
        action="<%= ((com.google.appengine.api.blobstore.BlobstoreService)request.getAttribute("blobstoreService")).createUploadUrl("/ad/add/image/upload.do") %>">
    <input type="hidden" name="secureId" value="${param.secureId}"/>
    <input type="hidden" name="type" value="${param.type}"/>
    <input type="hidden" name="editor" value="${param.editor}"/>

    <div class="image" id="${param.type}Image">
      <jsp:include page="/WEB-INF/jsp/ad/add/uploadedThumbnail.jsp">
        <jsp:param name="type" value="${param.type}"/>
        <jsp:param name="unsupportedImageType" value="${unsupportedImageType}"/>
      </jsp:include>
    </div>
    <div class="commands">
      <c:choose>
      <c:when test="${empty flatImageId}">
      <p>
      <span class="uploadButton">
        <input type="file" name="${param.type}" id="file" onchange="selectImage()"/>
        <span class="button small"><button onclick="document.getElementById('file').click();return false;">Загрузить</button></span>
      </span>
      <span class="message error" id="${param.type}UploadMessage">
        <c:if test="${unsupportedImageType}">
          Недопустимый формат изображения. Загрузите GIF либо JPEG
        </c:if>
      </span>
      </p>
      </c:when>
      <c:otherwise>
      <p>
        <span class="button small"><button type="button" onclick="deleteImage('${param.type}')">Удалить</button></span>
      <span class="message" id="${param.type}DeleteMessage">
        <c:if test="${delete}">
          Фотография удалена
        </c:if>
      </span>
      </p>
      </c:otherwise>
      </c:choose>
    </div>
  </form>
</div>